<template>
    <div class="user_message">
        <div class="head_box">
            <img class="head" :src="userInfo.image">
            <div class="btns">
                <el-upload
                    action="/api/upload/uploadImg"
                    name="file"
                    :on-success="HeadUpload"
                    :before-upload="beforeAvatarUpload"
                    :show-file-list="false"
                    class="imgInbox"
                    accept=".JPG, .PNG, .JPEG,.jpg, .png, .jpeg"
                >
                    <div class="edit_changs">修改</div>
                </el-upload>
            </div>
        </div>
        <div class="info_tabs">
            <div class="user_info">
                <div class="user_left">用户名：</div>
                <div class="titles">{{ userInfo.company }}</div>
            </div>
            <div class="user_info">
                <div class="user_left">姓名：</div>
                <template v-if="updateForm.name">
                    <div v-if="updateForm.name.edit" class="titles">
                        <el-input size="mini" v-model="updateForm.name.value"></el-input>
                    </div>
                    <div v-else class="titles">{{ userInfo.name }}</div>
                    <div class="options">
                        <span v-if="!updateForm.name.edit" class="opt-btn" @click="fieldUpdate('name')">修改</span>
                        <span v-if="updateForm.name.edit" class="opt-btn" @click="fieldSave('name')">保存</span>
                        <span v-if="updateForm.name.edit" class="opt-btn cencal" @click="fieldCancel('name')">取消</span>
                    </div>
                </template>
                <div v-else class="titles">{{ userInfo.name }}</div>
            </div>
            <div class="user_info">
                <div class="user_left">邮箱：</div>
                <template v-if="updateForm.email">
                    <div v-if="updateForm.email.edit" class="titles">
                        <el-input size="mini" v-model="updateForm.email.value"></el-input>
                    </div>
                    <div v-else class="titles">{{ userInfo.email }}</div>
                    <div class="options">
                        <span v-if="!updateForm.email.edit" class="opt-btn" @click="fieldUpdate('email')">修改</span>
                        <span v-if="updateForm.email.edit" class="opt-btn" @click="fieldSave('email')">保存</span>
                        <span v-if="updateForm.email.edit" class="opt-btn cencal" @click="fieldCancel('email')">取消</span>
                    </div>
                </template>
                <div v-else class="titles">{{ userInfo.email }}</div>
            </div>
            <div class="user_info">
                <div class="user_left">绑定手机：</div>
                <div class="titles">{{ userInfo.phone }}</div>
                <div @click="bindPhone=true" class="chang_tans">更换</div>
            </div>
            <div class="user_info">
                <div class="user_left">密码：</div>
                <div class="chang_tans" @click="passwordShow=true">修改密码</div>
            </div>
        </div>
        <transition name="slide-fade">
            <div class="city_location_box" v-if="bindPhone">
                <div class="location_box">
                    <div class="tips_title">更换绑定手机号</div>
                    <div class="line"></div>
                    <img @click="bindPhone=false" src="../../../assets/window-icon-close-black.png" class="close">
                    <div class="content_box_infos_tabcar">
                        <div class="tab_infos_input">
                            <div class="titles">输入新手机号：</div>
                            <input v-model="phone" placeholder="请输入"/>
                        </div>
                        <div class="tab_infos_input">
                            <div class="titles">验证码：</div>
                            <input style="width: 153px;margin-right: 8px" v-model="code" placeholder="请输入"/>
                            <div class="code_btn" @click="GetVerificationCode">{{ sendTime }}</div>
                        </div>
                    </div>
                    <div class="tips_btn">
                        <div @click="bindPhone=false">取消</div>
                        <div @click="ReplacePhone">确认</div>
                    </div>
                </div>
            </div>
        </transition>
        <transition name="slide-fade">
            <div class="city_location_box" v-if="passwordShow">
                <div class="location_box">
                    <div class="tips_title">修改密码</div>
                    <div class="line"></div>
                    <img @click="passwordShow=false" src="../../../assets/window-icon-close-black.png" class="close">
                    <div class="content_box_infos_tabcar">
                        <div class="tab_infos_input">
                            <div class="titles" style="width: 120px">输入原密码：</div>
                            <input type="password" v-model="old_password" placeholder="请输入"/>
                        </div>
                        <div class="tab_infos_input">
                            <div class="titles" style="width: 120px">输入新密码：</div>
                            <input type="password" v-model="password" placeholder="请输入"/>
                        </div>
                        <div class="tab_infos_input">
                            <div class="titles" style="width: 120px">再次输入新密码：</div>
                            <input type="password" v-model="again_password" placeholder="请输入"/>
                        </div>
                    </div>
                    <div class="tips_btn">
                        <div @click="passwordShow=false">取消</div>
                        <div @click="ChangePassword">确认</div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
    import {changePassword, changeUserImage, changeUserInfo, getSendCode, getUserInfo, replacePhone} from "@/api/apis";

    export default {
        name: "UserInfo",
        data() {
            return {
                userInfo: {},
                updateForm: {},
                bindPhone: false,
                code: '',
                phone: '',
                sendTime: '获取验证码',
                snsMsgWait: 60,
                passwordShow: false,
                again_password: '',
                password: '',
                old_password: '',
            }
        },
        mounted() {
            this.GetUserInfo()
        },
        methods: {
            GetUserInfo() {
                getUserInfo().then(res => {
                    res.data.image = res.data.image ? res.data.image : require('../../../assets/info-head.png')
                    this.userInfo = res.data
                    for (let field in this.userInfo) {
                        this.$set(this.updateForm, field, {
                            edit: false,
                            value: JSON.parse(JSON.stringify(this.userInfo[field]))
                        });
                    }
                })
            },
            beforeAvatarUpload(file) {
                const typeArr = ["image/png", "image/gif", "image/jpeg", "image/jpg"];
                const isJPG = typeArr.indexOf(file.type) !== -1;
                const isLt3M = file.size / 1024 / 1024 <= 1;
                if (!isJPG) {
                    this.$message.error("只能是图片!");
                } else if (!isLt3M) {
                    this.$message.error("上传头像图片大小不能超过 1MB!");
                }
                return isJPG && isLt3M;
            },
            HeadUpload(e) {
                if (e.status == "SUCCESS") {
                    let data = {image: e.data}
                    changeUserImage(data).then(res => {
                        this.userInfo.image = e.data
                        this.$store.commit('GetUserInfo')
                    })
                } else {
                    this.$message.error('头像更新失败，请重新上传')
                }
            },
            //用户手机验证码
            GetVerificationCode() {
                var phoneReg = /^1[3|4|5|6|7|8|9]\d{9}$/;
                if (!this.phone) {
                    this.$message.warning('请输入手机号');
                } else if (!phoneReg.test(this.phone)) {
                    this.$message.warning('请输入正确的手机号');
                } else {
                    if (this.snsMsgWait >= 60) {
                        let data = {phone: this.phone}
                        getSendCode(data).then(res => {
                            this.$message.success('验证码已发送')
                            this.inter = setInterval(function () {
                                this.sendTime = this.snsMsgWait + 'S'
                                this.snsMsgWait = this.snsMsgWait - 1
                                if (this.snsMsgWait < 0) {
                                    clearInterval(this.inter)
                                    this.sendTime = '重新发送'
                                    this.snsMsgWait = 60
                                }
                            }.bind(this), 1000);
                        })
                    }
                }
            },
            ReplacePhone() {

                let data = {phone: this.phone, code: this.code}
                replacePhone(data).then(res => {
                    this.userInfo = res.data
                    this.$message.success('更新成功')
                    this.bindPhone = false
                    this.phone = ''
                    this.code = ''
                })
            },
            ChangePassword() {
                let data = {
                    old_password: this.old_password,
                    password: this.password,
                    again_password: this.again_password,
                }
                changePassword(data).then(res => {
                    this.$message.success('更新成功')
                    this.passwordShow = false
                    this.again_password = ''
                    this.password = ''
                    this.old_password = ''
                })
            },
            fieldUpdate(field) {
                this.updateForm[field].edit = true;
            },
            fieldCancel(field) {
                this.$set(this.updateForm, field, {
                    edit: false,
                    value: JSON.parse(JSON.stringify(this.userInfo[field]))
                });
            },
            fieldSave(field) {
                changeUserInfo({
                    field: field,
                    value: this.updateForm[field].value,
                }).then((result) => {
                    if (result.status == "SUCCESS") {
                        this.GetUserInfo();
                        this.$message.success("修改成功");
                    } else {
                        this.$message.error(result.message);
                    }
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .user_message {
        .head_box {
            width: 88px;
            text-align: center;
            margin-left: 80px;
            margin-bottom: 20px;
            
            .head {
                width: 68px;
                height: 68px;
                border-radius: 50%;
                object-fit: cover;
                margin-bottom: 20px;
            }
            
            .edit_changs {
                width: 88px;
                height: 30px;
                background: #B11E24;
                font-size: 12px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                line-height: 30px;
                color: #FFFFFF;
                text-align: center;
            }
        }
        
        .info_tabs {
            .user_info {
                margin-bottom: 20px;
                display: flex;
                align-items: center;
                
                .user_left {
                    width: 80px;
                    text-align: right;
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #000000;
                }
                
                .company_name {
                    width: 299px;
                    padding: 0 11px;
                    height: 30px;
                    background: #FFFFFF;
                    border: 1px solid #C7C7C7;
                    box-sizing: border-box;
                    font-size: 12px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    line-height: 28px;
                    color: #000000;
                    border-radius: 4px;
                }
                
                .titles {
                    width: 200px;
                    height: 30px;
                    line-height: 30px;
                    font-size: 12px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #000000;
                    margin-right: 74px;
                }
                
                .options {
                    font-family: "Microsoft YaHei";
                    font-size: 12px;
                    font-weight: 400;
                    color: #B11E24;
                    
                    .opt-btn {
                        margin-right: 6px;
                    }
                }
                
                .chang_tans {
                    font-size: 12px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #B11E24;
                }
            }
        }
        
        .city_location_box {
            position: fixed;
            width: 100%;
            height: 100vh;
            background: rgba(0, 0, 0, 0.21);
            left: 0;
            bottom: 0;
            z-index: 8;
            
            .location_box {
                width: 480px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                border: 1px solid #9D9D9D;
                padding: 32px 0 30px;
                z-index: 10;
                background: #FFFFFF;
                
                .tips_title {
                    font-size: 16px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #000000;
                    margin-bottom: 17px;
                    text-align: center;
                }
                
                .line {
                    width: 477px;
                    height: 2px;
                    background: #E9E9E9;
                    box-sizing: border-box;
                    margin-bottom: 37px;
                }
                
                .tips_btn {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    
                    div {
                        width: 69px;
                        height: 30px;
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        line-height: 30px;
                        cursor: pointer;
                        text-align: center;
                    }
                    
                    div:nth-child(1) {
                        border: 1px solid #C7C7C7;
                        color: #9D9D9D;
                        box-sizing: border-box;
                        margin-right: 10px;
                    }
                    
                    div:nth-child(2) {
                        color: #FFFFFF;
                        background: #B11E24;
                    }
                }
                
                .close {
                    width: 18px;
                    height: 18px;
                    position: absolute;
                    z-index: 7;
                    right: 10px;
                    cursor: pointer;
                    top: 10px;
                }
                
                .content_box_infos_tabcar {
                    width: 357px;
                    margin: 0 auto 30px;
                    
                    .tab_infos_input {
                        margin-bottom: 20px;
                        display: flex;
                        align-items: center;
                        
                        .titles {
                            text-align: right;
                            width: 100px;
                            font-size: 14px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #000000;
                        }
                        
                        input {
                            width: 259px;
                            height: 30px;
                            background: #FFFFFF;
                            padding: 0 12px;
                            border: 1px solid #C7C7C7;
                            box-sizing: border-box;
                            font-size: 12px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #C7C7C7;
                        }
                        
                        .code_btn {
                            width: 99px;
                            height: 30px;
                            background: #B11E24;
                            font-size: 14px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            line-height: 30px;
                            text-align: center;
                            color: #FFFFFF;
                        }
                        
                        .btns {
                            width: 68px;
                            height: 30px;
                            background: #B11E24;
                            font-size: 14px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            line-height: 30px;
                            color: #FFFFFF;
                            text-align: center;
                        }
                    }
                    
                    .Tab_cars {
                        padding: 17px 20px;
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #000000;
                        background: #F7F7F7;
                        
                        .top {
                            display: flex;
                            margin-bottom: 10px;
                        }
                    }
                }
                
                .address_tabs {
                    width: 323px;
                    
                    .tab_infos_input {
                        .titles {
                            width: 100px;
                        }
                    }
                }
            }
        }
    }
</style>
